<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>支付</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <style>
     body{
        background: transparent;
        position: relative;
    }


        /*::-webkit-scrollbar{display:none;}*/
        .payContain{
            overflow: hidden;
        }
        .aui-nav {
            height: auto;
        }

        .aui-icon-left {
            padding-left: 10px;
        }

        .aui-iconfont {
            position: absolute;
        }

        .content {
            display: inline-block;
        }

        .contents {
            margin-left: 25px;
            margin-right: 15px;
            text-align: left;
        }

        .contents > span {
            display: block;
        }

        .icon {
            position: absolute;
            top: 50%;
            text-align: center;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .address {
            margin-top: 4px;
        }

        .addressTop.aui-tab-nav li {
            line-height: inherit;
            height: auto;
            position: relative;
            padding: 15px;
            width: 100%;
            color: #fff;
        }

        .aui-tab-nav {
            height: inherit;
            display: block;
            background: #4f6ea6;
        }

        .haderTitle li > span {
            float: left;
            display: block;
        }

        .detail {
            overflow: hidden;
            padding: 5px 15px;
        }
        .detail p{
            color: #666 !important;
            font-size: 13px;
        }

        /*.good-pirce {
            color: #ff0005;
            font-weight: bold;
        }*/

        .total {
            margin-top: 10px;
        }

        .haderTitle li > span {
            float: left;
            display: block;
        }

        .contain {
            margin-top: 45px;
            margin-bottom: 140px;
        }

        .contain .aui-tab-nav li {
            line-height: inherit;
            height: auto;
            position: relative;
            padding: 15px;
            width: 100%;
        }

        .contain .aui-tab-nav {
            height: inherit;
            display: block;
        }

        .contents {
            margin-left: 25px;
            margin-right: 15px;
            text-align: left;
        }

        .content {
            display: inline-block;
        }

        .contents > span {
            display: block;
        }

        .time {
            display: block;
        }

        .icon {
            position: absolute;
            top: 50%;
            text-align: center;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .address {
            margin-top: 8px;
        }

        .good {
            background: #fff;
            margin-bottom: 15px;
        }

        .good-info-list {
            color: #a3a3a3;
            font-size: 12px;
            line-height: 1.4;
        }

        .company-name {
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            background: #fff;
            padding-left: 15px;
            position: relative;
        }

        .good_bottom {
            /*padding: 15px;*/
        }

        .good_bottom ul li {
            overflow: hidden;
            margin-bottom: 5px;
        }

        .good_bottom ul li span {
            display: block;
        }

        .shiji {
            font-weight: bold;
            font-size: 18px;
        }

        .good-info .aui-list-view {
            margin: 0;
        }

        .contact {
            overflow: hidden;
        }

        .contactMeg, .contactPhone {
            display: block;
            padding: 5px 30px;
            border: 1px solid #9c9c9c;
            float: left;
            width: 48%;
            margin-top: 10px;
        }

        .contactMeg {
            margin-right: 2%;
        }

        .menuRgiht {
            float: right;
            margin-right: 20px;
        }

        .good_bottom {
            background: #fff;
        }

        .aui-iconfont {
            margin-right: 5px;
        }

        .total {
            margin-top: 15px;
            margin-bottom: 10px;
        }

        /*.total .good-pirce {
            font-size: 18px;
        }*/

        input[type="text"] {
            margin: 0;
        }

        .waitingTips {
            width: 100%;
            background: #ffd9cd;
            text-align: center;
            height: 25px;
            line-height: 25px;
            overflow: hidden;
            color: #ff6868;
            font-size: 12px;
        }

        /*下面弹出的样式*/
        .pickerToTop {
            position: fixed;
            bottom: 0;
            -webkit-transform: translateY(395px);
            height: 395px;
            overflow-y: auto;
            -webkit-transition: .5s;
            transition: .5s;
            z-index: 999;
            width: 100%;
            text-align: center;
            background: #fff;
            width: 200%;
        }

        .toTopAnimate {
            -webkit-transform: translateY(00px);
        }

        .pickerToTop .aui-list-view-cell:not(:first-of-type) {
            text-align: left;
        }

        /*.pickerToTop .aui-list-view-cell:last-of-type:after{
            border: 0;
        }*/
        .pickerToTop .myBtn {
            position: fixed;
            bottom: 0;
            width: 50%;
        }

        .myBorder {
            /*height: 8px;*/
            /*background: #797979;*/
        }

        .paw {
            background: url(../image/pawbg.jpg);
            background-size: contain;
            margin: 0 auto;
            width: 270px !important;
            letter-spacing: 40px;
        }

        .pickerToTop .aui-iconfont {
            position: absolute;
            left: 10px;
            top: 10px;
            font-size: 20px;
            color: #000;
            z-index: 9;
        }

        .pay, .checkCard {
            float: left;
            width: 50%;
            position: relative;
        }

        .pickerToTop .aui-list-view-cell:after {
            /*border: 0;*/
        }

        .title {
            background: #fff;
            padding: 15px;
        }

        .good_bottom .aui-list-view:after {
            border: 0;
        }

        span.xiaoji {
            position: relative;
            display: block;
            padding: 0 8px;
        }

        span.xiaoji:nth-of-type(2):before {
            position: absolute;
            content: "";
            width: 1px;
            background: #b6b6b6;
            top: 2px;
            right: 0;
            bottom: 2px;
        }

        .good-info {
            margin-bottom: 15px;
        }

        .checkCard .myBtn {
            background: none;
            color: #000;
        }

        .pickerToTop2 {
            transition: 0.5s;
        }

        .showCar {
            -webkit-transform: translateX(-50%);
        }

        .pickerToTop ul li:not(:first-of-type) {
            font-size: 14px;
        }

        .payList li {
            position: relative;

        }

        .payList li img {
            width: 25px;
            vertical-align: middle;
            margin-right: 5px;
        }

        .payList li.payActive:before {
            content: "\e645";
            font-family: "auiicon" !important;
            right: 20px;
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            color: #327afa;
            border: 1px solid #327afa;
            line-height: 20px;
            text-align: center;
        }

        .pickerToTop2 {
            width: 100%;
            overflow: hidden;
            height: inherit;
        }

        .btnAddCard {
            z-index: 99;
            color: #fff !important;
        }

        .result {
            display: none;
            padding: 15px;
            padding-top: 100px;
            background: #fff;
        }

        .spanOk {
            display: block;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            background: #ff3333;
            position: relative;
            margin: 0 auto;
            margin-bottom: 10px;
        }

        .spanOk:before {
            position: absolute;
            content: "\e645";
            left: 26%;
            top: 10%;
            color: #fff;
            font-size: 25px;
        }

        .ok {
            text-align: center;
            padding-bottom: 15px;
            margin-bottom: 15px;
        }

        .result .aui-btn {
            width: 45%;
            float: left;
            margin-top: 15px;
            margin-right: 10px;
            overflow: hidden;
        }

        .result .waring {
            font-size: 12px;
            color: #646464;
            overflow: hidden;
            margin-top: 15px;
            width: 100%;
        }

        .btns {
            overflow: hidden;
        }

    </style>
</head>

<body>



<div class="payContain">
    <footer class="aui-nav ">
        <div class="detail aui-border-t">
            <div class="aui-pull-left">
                <p>店铺优惠: <span id="discount">无</span></p>

                <p>运费总计: <span id="expressAll">--</span></p>

                <p>货款总计: <span id="goodsPrice">--</span></p>
            </div>
            <div class="aui-pull-right total">
                <p style="font-size:16px;">总计: <span id="priceAll" class="aui-text-danger" style="font-size:18px;">--</span></p>

            </div>
        </div>
        <div class="myBtn" tapmode onclick="showPicker()">提交订单</div>
    </footer>
    <div class="pickerToTop">
        <div class="pickerToTop2">
            <div class="pay">
                <i class="aui-iconfont aui-icon-roundclose" tapmode onclick="hidePicker()" style="color:#999;"></i>
                <ul class="aui-list-view ">
                    <li class="aui-list-view-cell">
                        付款详情
                    </li>
                    <li class="aui-list-view-cell" >
                    <!--<li class="aui-list-view-cell" tapmode onclick="showCheckCard()">-->
                        <!-- <a class="aui-arrow-right"> -->
                            <span style="color:#666;">支付方式</span>
                            <span class="menuRgiht payMethod aui-text-info">支付宝支付</span>
                        <!-- </a> -->
                    </li>
                    <li class="aui-list-view-cell">
                        <a class="">
                            需付款
                            <span class="menuRgiht">￥ <em class="payMoney"></em></span>
                        </a>
                    </li>
                </ul>
                <div class="myBtn" tapmode onclick="comfirmPay()">确认付款</div>
            </div>
            <div class="checkCard">
                <i class="aui-iconfont aui-icon-left" tapmode onclick="showCheckCardBack()" style="color:#999;"></i>
                <ul class="aui-list-view payList">
                    <li class="aui-list-view-cell">
                        付款详情
                    </li>
                    <li class="aui-list-view-cell payActive" tapmode onclick="checkCardFn(this)">
                        <img src="../icon/AliPayIcon.png">支付宝支付
                    </li>
                    <li class="aui-list-view-cell" tapmode onclick="checkCardFn(this)">
                        <img src="../icon/CMBIcon.png">招商银行储蓄卡（2130）
                    </li>
                    <li class="aui-list-view-cell" tapmode onclick="checkCardFn(this)">
                        <img src="../icon/BOCIcon.png">中国银行储蓄卡（6050）
                    </li>
                    <li class="aui-list-view-cell" tapmode onclick="checkCardFn(this)">
                        <img src="../icon/ABCIcon.png">中国农业银行储蓄卡（1480）
                    </li>
                </ul>
                <!-- <div class="myBtn aui-border-t btnAddCard" tapmode onclick="openToTwo('my/addCard')">+添加新卡付款</div> -->
                <div class="myBtn aui-border-t btnAddCard" tapmode onclick="openToTwo('my/addCard');hidePicker()">
                    +添加新卡付款
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script type="text/javascript" src="../script/index.js"></script>
<script type="text/javascript">
    var totalMoney;
    apiready = function () {
        api.parseTapmode();
        totalMoney=api.pageParam.money;
        setBodyLayer();
        mask.show();
        $(".totalMoney").text(totalMoney);
        $(".pickerToTop").addClass("toTopAnimate");
    }


    function checkCardFn(obj) {
        $(obj).parent().find("li").removeClass("payActive");
        $(obj).addClass("payActive");
        $(".payMethod").text($(obj).text());
        showCheckCardBack();
    }
    // mui遮罩
    var mask = mui.createMask(hidePicker);
    // 显示遮罩
    function showPicker(obj) {
        //提交订单到数据库
        orderSubmit();
    }
    // 关闭遮罩
    function hidePicker(isForce) {
        $(".pickerToTop").removeClass("toTopAnimate");

        if(isForce){
            mask.myclose();
            removeBodyLayer();

            api.closeFrame();
        }else{

                // 延迟0.5s为了不让效果向右下角收缩
                setTimeout(function () {
                    $(".pickerToTop2").removeClass("showCar");

                    mask.myclose();
                    removeBodyLayer();

                    api.closeFrame();
                }, 500);
        }
    }
    // 右滑选择银行卡
    function showCheckCard() {
        $(".pickerToTop2").addClass("showCar");
    }
    // 右滑选择银行卡
    function showCheckCardBack() {
        $(".pickerToTop2").removeClass("showCar");
    }
    // 支付成功
    function comfirmPay() {
        showLoading();
         //触发支付成功
         api.sendEvent({
            name : 'payOrderSuccess',
            extra : {
                key : 'true'
            }
        })
        // $(".payContain").css({"display": "none"});
        // $(".result").css({"display": "block"});
        hidePicker(true);
    }
</script>

</html>
